.k-button {
  height: 30px;
  font-size: var(--k-font-size);
  letter-spacing: var(--k-letter-spacing);
  outline: none;
  border: 1px solid var(--k-border-color);
  background-color: transparent;
  border-radius: var(--k-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  transition: background-color 0.5s ease-in-out;
  cursor: pointer;
}
.k-button-default {
    color: #fff;
    border: 1px solid var(--k-default-color-100);
}
.k-button-default:hover{
    border: 1px solid var(--k-default-color-50);
}

.k-button-primary {
    color: var(--k-primary-color-100);
    border: 1px solid var(--k-primary-color-100);
    background-color: var(--k-primary-color-20);
}
.k-button-primary:hover{
    background-color: var(--k-primary-color-50);
}

.k-button-success {
    color: var(--k-success-color-100);
    border: 1px solid var(--k-success-color-100);
    background-color: var(--k-success-color-20);
}
.k-button-success:hover{
    background-color: var(--k-success-color-50);
}

.k-button-warning {
    color: var(--k-warning-color-100);
    border: 1px solid var(--k-warning-color-100);
    background-color: var(--k-warning-color-20);
}
.k-button-warning:hover{
    background-color: var(--k-warning-color-50);
}

.k-button-danger {
    color: var(--k-danger-color-100);
    border: 1px solid var(--k-danger-color-100);
    background-color: var(--k-danger-color-20);
}
.k-button-danger:hover {
    background-color: var(--k-danger-color-50);
}
